<template>
	<div class="article_list">
		<!-- <articleHome :article_all="checked_article_info"></articleHome> -->
		<template>
			<ul class="el-main_ul ">
				<li v-for="item in list" :key="item.articleID">
					<h2 class="entry-title"><a href="javascript:0;" @click="click_article(item)">{{ item.title }}</a>
					</h2>
					<div class="article_cover_summary_box" :title="item.title" @click="click_article(item)">
						<el-image class=" wz_el_image" :src="item.cover" fit="fill">
						</el-image>
						<div class="entry-summary">
							<p>{{ item.summary }}...</p>
						</div>
					</div>
					<!-- 发布时间 -->
					<span class="createAt">
						发布时间：{{ item.createAt.split('T')[0] }}
						· 最后更新时间：{{ item.updatetime.split('T')[0] }}</span>
					<wz-toolbar :shsarticle="item"></wz-toolbar>
				</li>
			</ul>
			<p v-if="loading">加载中...</p>
			<p v-if="noMore">我是有底线的捏！！！</p>
		</template>

	</div>
</template>
<script>
/*导入文章搜索all */
import { Article_isok } from "@/request/api";

export default {
	name: 'articleList',
	props: {
		artcle_title: {
			type: String,
			default: ''
		}
	},
	data() {
		return {
			list: [],//文章列表
			begin_index: 0,//开始索引
			page_size: 10,//行数
			loading: false,
			flag: false,
			total: 0,//总数
		}
	},
	computed: {
		noMore() {
			return this.flag
		},
		disabled() {
			return this.loading || this.noMore
		}
	},
	updated() {
		// console.log("更新了");
	},
	methods: {
		/**加载 */
		load(init) {
			let _this = this;
			if (!init) {
				_this.begin_index += _this.page_size;
			}
			Article_isok({ title: _this.artcle_title, begin_index: _this.begin_index, page_size: _this.page_size }).then(data => {
				// console.log(data);
				if (data.data.code == 200) {
					_this.total = data.data.data.total;
					// console.log(data.data.data.total);
					if (data.data.data.list.length > 0) {
						for (let i = 0; i < data.data.data.list.length; i++) {
							_this.list.push(data.data.data.list[i]);
						}
						_this.flag = true
						_this.loading = false
					} else {
						_this.flag = true
						_this.loading = false
					}
				} else {
					_this.flag = true
					_this.loading = false
				}
			}).catch(() => {
				_this.flag = true
				_this.loading = false
			})
		},
		// init_list_t(title, begin_index, page_size) {
		//返回 排序前10的文章
		// let _this = this;
		// Article_isok({ title: title, begin_index: begin_index, page_size: page_size }).then(data => {
		// 	console.log(data);
		// 	if (data.data.code == 200) {
		// 		_this.list = data.data.data.list
		// 	}
		// })
		// },
		//跳转 传入参数且地址栏中不带参数内容
		// 参数的取值方法是：this.$route.params.key
		// 由于动态路由也是传递params的，所以在 this.$router.push() 方法中 path不能和params一起使用，否则params将无效，这时就需要用name来指定页面，所以通常我们直接用name会比较好。
		click_article(row) {
			// let objData = JSON.stringify(row)
			//存儲缺點 不能实时更新  V2刷新一次请求一次新数据
			//写入本地存储 接收方再去请求localStorage
			// localStorage.setItem('articleInfo',objData);
			//传递参数过去
			// this.$router.push({
			// 	name: 'articleHome',
			// 	params: { articleInfo: encodeURIComponent(objData) }
			// })
			/**V2刷新一次请求一次新数据 */
			// let routeUrl = this.$router.resolve({
			// 	path: "/articleHome",
			// 	query: {
			// 		ID: row.articleID
			// 	}
			// });
			// window.open(routeUrl.href, '_blank');
			//v3 单业开发
			// this.$router.push({ name: 'articleHome', params: { ID: row.articleID } })
			//V4 query
			this.$router.push({ path: '/articleHome', query: { ID: row.articleID } })
		},
		handleScroll() {
			/*
			scroll_num
			integerMultiples_num++; 1
			scrollTop/scroll_num>integerMultiples_num
			*/
			// console.log(scrollTop, '滚动距离')
			if (this.total > this.list.length) {
				// 变量 scrollHeight 是滚动条的总高度
				let scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight
				// 变量 windowHeight 是可视区的高度 滚动条滑块的高度
				let windowHeight = document.documentElement.clientHeight || document.body.clientHeight
				// 变量scrollTop为当前页面的滚动条纵坐标位置
				let scrollTop = document.documentElement.scrollTop || document.body.scrollTop
				// 滚动条到底部的距离 = 滚动条的总高度 - 滑块/可视区的高度 - 当前页面的滚动条纵坐标位置
				var scrollBottom = scrollHeight - windowHeight - scrollTop
				// console.log("滚动条滑块的高度", windowHeight,"距离底部的高度",scrollBottom);
				// console.log("滚动条纵坐标位置scrollHeight", scrollHeight, "scrollTop", scrollTop);
				if (scrollBottom < 100) {
					clearTimeout(this.timer_load);
					this.timer_load = setTimeout(() => {
						// console.log("小于100时间到 加载中");
						this.loading = true
						this.flag = false;
						this.load();
					}, 800)
				}
				// if (parseInt(scrollTop) > 20) {
				// 	clearTimeout(this.timer_load);
				// 	this.timer_load = setTimeout(() => {
				// 		console.log("大于800时间到 加载中");
				// 		this.loading = true
				// 		this.flag = false;
				// 		this.load();
				// 	}, 800)
				// }
			}

		}
	},
	mounted() {
		this.list = [];
		this.begin_index = 0;//开始索引
		this.page_size = 3;//一次返回的行数
		this.total = 0;
		this.load(1);//初始化加载 的数据列表
		// this.init_list_t(this.artcle_title, this.begin_index, this.page_size);//初始化加载 的数据列表
		window.addEventListener('scroll', this.handleScroll) // 监听滚动事件，然后用handleScroll这个方法进行相应的处理
	},
	components: {
		wzToolbar: () => import("@/components/wztoolbar.vue")
	},
	//销毁  
	beforeDestroy() {
		window.removeEventListener('scroll', this.handleScroll)//滚动重置
		clearTimeout(this.timer_load);
		//清空数据数组
		this.list=null;
	},
	//监听 搜索的文章标题是否改变
	watch: {
		artcle_title() {
			console.log("改变了");
			this.list = [];
			this.begin_index = 0;//开始索引
			this.page_size = 10;//行数
			this.total = 0;
			this.load(1);//初始化加载 的数据列表
			// this.init_list_t(this.artcle_title, this.begin_index, this.page_size);//初始化加载 的数据列表

		}
	}
}

</script>

<style>
ul {
	list-style: none;
}

.el-main_ul {
	width: 100%;
	padding: 10px;
	/* display: grid; */
	justify-items: center;
}

.el-main_ul li {
	width: 100%;
	height: auto;
	padding: 10px;
	text-align: left;
	margin: 10px;
	border-bottom: 1px solid #175199;
	/* border-top: 1px solid #175199; */
	/* background: #ff0000; */
}

.el-main_ul li:hover {
	background: rgba(231, 222, 222, 0.3);
	border-radius: 8px;
}

.entry-title {
	margin-bottom: 20px;
	font-size: 20px;
	line-height: 1.3;
}

.entry-title a {
	color: #121212;
	text-decoration: none;
}

.entry-title a:hover {
	color: #175199
}

.entry-summary {
	width: 100%;
	padding: 2px;
	max-height: 105px;
	overflow: hidden;
}

.entry-summary p {
	width: 100%;
	font-size: 16px;
	line-height: 26px;
	font-style: normal;
	font-weight: 400;
}

.createAt {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.3);
}

/*文章封面 概要box */
.article_cover_summary_box {
	display: flex;
	cursor: pointer;
}

.article_cover_summary_box .el-image {
	margin: 0 20px 10px 0;
}

/* 文章图片圆角*/
.wz_el_image {
	width: 190px;
	height: 105px;
	border-radius: 5px;
}
</style>